<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();


const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  getMid();
pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  getMid();
pageNum.value = num
}//分页模型结束

//输入框
import { Search } from '@element-plus/icons-vue'
import {getMidService,getErrorDetailService,uploadMidService,uploadService} from "@/api/Item.js"
import { ElMessage,ElMessageBox  } from 'element-plus';
const nameSearch = ref('')

//定义返回列表数据
const midPage = ref([])

//数据模型
const projectInfo=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})

//文件
const fileList = ref([
])
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const onClickUpload = (event) => {
  // 这里可以留空，因为.stop已经处理了阻止冒泡的逻辑
};
//上传附件
// 存储上传后的文件信息
const extractedData = ref([]);
const fileIndex=ref(0)
const handleFileChange=async(file)=>{
   let result=await uploadService(file,1)
   console.log(result.data)
   fileList.value=result.data
  console.log(fileList.value)
}

//保存中期附件
const saveMidAccessory=async()=>{
  dialogFormVisible.value=false
    console.log(fileList.value)
     extractedData.value = fileList.value.map(file => ({
    name: file.name,
    url: file.url
  }));
    let result=await uploadMidService(extractedData.value,currentRow.value.projectId)
    if(result.code===200){
      ElMessage.success("提交中期附件成功")
    }
   
}

//获取中期审核列表
const getMid=async()=>{
    let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getMidService(params)
    midPage.value=result.data.records
 
    
}
getMid();

//项目类别展示
const formatCategory=(row)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[row.category]
}
//失败详情显示项目类型
const textCategory=(category)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[category]
}
//事件
//提交文件数据模型
const currentRow=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})
//详情数据模型
const errorRow=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})
//提交文件
const handleSubmit=async(row)=> {
  router.push({ path: '/upload/item', query: { id: row.id ,type:1} });

    }
 const handleDelay=(row)=> {
      // 处理“延期”点击事件
      alert("延期")
      console.log("延期", row);
    }
//项目未通过详情
const handleDetail=async(row)=> {
  router.push({ path: '/error', query: { id: row.id ,type:1} });
 
    }
//点击每行跳转到项目详情
const handleRowClick=async(row)=>{
    console.log(row.id)
    router.push({ path: '/item/details',query: { id: row.id } });
}  
//修改成员
const handleMemberClick=(row)=> {
        row.change=row.change+1
        router.push({ path: '/changeMember',query: { id: row.id } });
    }
//根据项目名查询
const onSearchClick=async()=>{
  let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getBeginService(params)
    beginPage.value=result.data.records
    total.value=result.data.total
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>中期列表</span>
            </div>
        </template>
        <el-input
              v-model="nameSearch"
              style="width: 30%; margin: 10px;"
              class="w-50 m-2"
              size="large"
              placeholder="请输入项目名"
              
            />
            <el-button type="primary" :icon="Search"  @click="onSearchClick"></el-button>
        <el-table :data="midPage" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="项目名称" prop="name" ></el-table-column>
            <el-table-column label="项目编号" prop="id" :show-overflow-tooltip="true"
               :header-cell-class-name="'no-wrap'" min-width="150"></el-table-column>
            <el-table-column label="指导老师" prop="teacher"></el-table-column>
            <el-table-column label="负责人" prop="tutor"></el-table-column>
            <el-table-column label="成员" prop="member" >
              <template v-slot:default="scope">
                    <span v-if="scope.row.change === 0" >
                      <el-button type="text" @click.stop="handleMemberClick(scope.row)">{{ scope.row.member.join(', ') }}</el-button>
                    </span>
                    <span v-else>
                      {{ scope.row.member.join(', ') }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="项目类型" prop="category" :formatter="formatCategory"></el-table-column>
            <el-table-column label="项目状态" prop="status">
                    <template v-slot="scope">
                      <span :class="{ 'red-color': scope.row.status === '中期审核未通过', 'blue-color': scope.row.status === '中期审核中'|| scope.row.status ==='未中期审核', 'green-color': scope.row.status === '中期审核通过' }">
                        {{ scope.row.status }}
                      </span>
                    </template>
            </el-table-column>
            <el-table-column label="操作">
                  <template v-slot="{row}">
                    <span v-if="row.flag === 1">
                      <el-button type="text" @click.stop="handleSubmit(row)">提交文件</el-button>
                    </span>
                    <span v-else-if="row.flag === 2">
                      <el-button type="text" @click.stop="handleDetail(row)">详情</el-button>
                    </span>
                  </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
        layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: large;
    }
}
//不换行
.no-wrap {
  white-space: nowrap;
}

//成员字体
.clickable-text:hover {
  color: #007bff; /* 蓝色 */
  text-decoration: underline; /* 下划线效果 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 18px; /* 字体大小设置为 18px */
}

//对话框
.el-button--text {
  margin-right: 5px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog__wrapper {
  z-index: 9999999; /* 或者根据需要设定更高的值 */
  position: fixed; /* 确保对话框及其遮罩层相对于视口固定定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
//审核字体颜色
.red-color {
  color: red;
}

.blue-color {
  color: blue;
}

.green-color {
  color: green;
}
</style>